<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FileReader读取文件信息</title>
</head>
<!-- https://blog.csdn.net/xianweizuo/article/details/88911364 -->

<body>
  <input id="result" type="file" value="点击我">
  <div id="dv"></div>
</body>
<script>
  "use strict"; {
    const dv = document.getElementById("dv");
    document.querySelector("#result").addEventListener("change", (e) => {
      let first_res = e.target.files[0];
      let reader = new FileReader(); //创建读取文件对象
      reader.readAsText(first_res); //readAsText读取文件信息
      reader.addEventListener("load", (e) => {
        dv.innerHTML = e.target.result;
      });
    });
  };
</script>

</html>